<template>
	<view class="goods-warp" v-if="detail.goods_price">
		<uni-goods-nav class="bottom" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item v-for="(item,i) in detail.pics " :key="item.pics_id" @click="preview(i)">
				<view class="swiper-item">
					<image :src="item.pics_big"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="description">
			<text class="price">￥{{detail.goods_price}}</text>
			<view class="title">
				<view class="text">
					{{detail.goods_name}}
				</view>
				<view class="like">
					<uni-icons type="star"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="express">
				<text>快递: 免运费</text>
			</view>
		</view>
		<rich-text class="rich-text" :nodes="detail.goods_introduce"></rich-text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_id: '',
				detail: {},
				options: [{
					icon: 'shop',
					text: '店铺',
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
		onLoad({ goods_id }) {
			this.goods_id = goods_id
			this.getDetail()
		},
		methods: {
			async getDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				const { data: { message } } = await uni.$http.get(
					`/api/public/v1/goods/detail?goods_id=${this.goods_id}`)
				this.detail = message
				uni.hideLoading()
			},
			preview(i) {
				uni.previewImage({
					current: i,
					urls: this.detail.pics.map(item => item.pics_big)
				})
			},
			onClick(e) {
				if(e.content.text==='购物车'){
				uni.switchTab({
					url:"/pages/cart/cart"
				})
				}
			},
			buttonClick(e) {
				console.log(e)
				this.options[1].info++
			}
		},

	}
</script>

<style lang="scss">
	.goods-warp{
		padding-bottom: 100rpx;
		swiper {
			height: 750rpx;
		
			.swiper-item {
				height: 750rpx;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.description {
			padding: 0 15rpx;
		
			.price {
				padding: 20rpx 0 0;
				display: block;
				color: #b54740;
				font-size: 40rpx;
			}
		
			.title {
				display: flex;
				margin: 20rpx 0;
		
				.text {
					padding-right: 10rpx;
					border-right: 1px solid #818181;
					width: 80%;
				}
		
				.like {
					padding-left: 35rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}
			}
		
			.express {
				color: #b8b8b8;
				font-size: 28rpx;
			}
		}
		
		.rich-text {
			font-size: 0;
		}
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
	
</style>
